import {useCallback, useEffect, useState} from "react";
import {Input, View} from "@tarojs/components";
import styles from './index.module.scss';

interface Props{
  closeInput: ()=>void;
  show: boolean
}

export function InputComment (props: Props){

  const [focused, setFocused] = useState(false);

  useEffect(() => {
    if(props.show){
      setFocused(true);
    }else{
      setFocused(false);
    }
  }, [props.show]);

  const onBlur = useCallback(()=>{
    setFocused(false);
  }, []);

  return (
    <View style={{display: props.show ? 'block' : 'none'}}>
      <View className={styles.cancelCover} onClick={props.closeInput} />
      <View className={styles.wrapper}>
        <View className={styles.avatar}></View>
        <Input focus={focused} onBlur={onBlur} cursorSpacing={10} />
        <View className={styles.send}>发送</View>
      </View>
    </View>
  );
}
